<template>
  <div class="personal-data">
    <!-- 头部 -->
    <div class="demo-nav" style="">
      <div class="demo-nav__title">个人资料</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="goback()">
        <path
          fill="#969799"
          fill-rule="evenodd"
          d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"
        ></path>
      </svg>
    </div>
    <!-- 图片部分 -->
    <div class="jian">
      <div class="ding">
        <van-uploader
          :after-read="afterRead"
          v-model="fileList"
          :max-count="1"
          :deletable="false"
          ><img
            src="https://mpp-ciam-oss-prod.oss-cn-shanghai.aliyuncs.com/avatar/3.png"
        /></van-uploader>
        <span>
          <svg
            t="1635818995708"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3400"
            width="15"
            height="15"
          >
            <path
              d="M465.654 852.308l429.529-509.401c27.574-32.622 23.301-81.943-9.321-109.388l-158.193-133.597c-32.622-27.574-81.943-23.301-109.388 9.321l-429.658 509.401-24.854 271.595c-0.907 9.968 3.107 19.807 10.745 26.279s17.994 8.803 27.703 6.213l263.439-70.422zM587.213 242.32l182.141 153.533-311.077 368.944-182.141-153.662 311.077-368.814zM687.54 147.432l158.322 133.467c6.473 5.438 7.249 15.405 1.812 21.878l-38.577 45.826-182.012-153.533 38.577-45.826c5.438-6.473 15.534-7.249 21.878-1.812zM229.014 851.79l16.959-184.731 162.335 136.833-179.293 47.899z"
              fill="#ffffff"
              p-id="3401"
            ></path>
          </svg>
        </span>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bom">
      <span>用户名</span>
      <span>{{ name }}</span>
    </div>
  </div>
</template>

<script>
import { personalDataAPI } from "../../api/setup";
export default {
  data() {
    return {
      fileList: [],
      name: {},
    };
  },
  computed: {},
  watch: {},

  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },

    // 调用用户信息
    async yonghu() {
      const result = await personalDataAPI();
      this.name = result.userName;
    },

    //返回
    goback() {
      this.$router.push("/setup");
    },
  },
  created() {
    this.yonghu();
  },
  mounted() {},
  components: {},
};
</script>
<style>
/* 头部 */
.demo-nav {
  justify-content: center;
  height: 45px;
  background-color: #fff;
  position: relative;
  display: flex;
  line-height: 45px;
  align-items: center;
}
.demo-nav__title {
  font-weight: 600;
  font-size: 18px;
}
.demo-nav__back {
  position: absolute;
  font-size: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  color: #323233;
}
/* 图片部分 */
.jian {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jian .van-uploader {
  width: 80px;
  height: 75px;
  border-radius: 75px;
  margin: 0 auto;
}
.jian .ding {
  width: 80px;
  height: 80px;
  position: relative;
}
.jian img {
  width: 80px;
  height: 80px;
  border-radius: 80px;
}
.jian span {
  display: block;
  width: 20px;
  height: 20px;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}
/* 底部 */
.bom {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f2f2f2;
  border-top: 1px solid #f2f2f2;
}
.bom span {
  display: inline-block;
  margin: 0 25px;
}
</style>
